<template>
  <div class="loginview">
    <NavBarView />
    <div class="login">
      <h1>注册</h1>
      <div class="login-form">
        <!-- 手机号 -->
        <van-form>
          <!-- 密码 -->
          <van-field
            v-model="password"
            type="tel"
            placeholder="请输入密码"
            maxlength="12"
            minlength="3"
            :rules="[{ required: true, message: '请填写密码' }]"
          >
          </van-field>
          <!-- 密码 -->
          <van-field
            v-model="password1"
            type="tel"
            placeholder="请重新输入密码"
            maxlength="12"
            minlength="3"
            :rules="[{ required: true, message: '请填写密码' }]"
          >
          </van-field>
        </van-form>
        <!-- 协议 -->
        <div class="agreement">
          <van-checkbox v-model="checked" icon-size="14px" shape="square">
            我已阅读并同意签署
            <span>《用户协议》</span>
            <span>《隐私政策》</span>
          </van-checkbox>
        </div>
        <!-- 登录按钮 -->
        <van-button
          type="primary"
          block
          style="margin-top: 10px"
          @click="throttledPhoneLogin"
          >注册</van-button
        >
      </div>
    </div>
  </div>
</template>
    
    <script setup lang="ts">
import { ref } from "vue";
import NavBarView from "./components/NavBarView.vue";
import { useRoute, useRouter } from "vue-router";
import instance from "@/http/index";
import { throttle } from "./utils/debounce";
import { ElMessage } from "element-plus";
import { register } from "./services/register";

const router = useRouter();
const route = useRoute();
const password = ref<string>("");
const password1 = ref<string>("");

const checked = ref<boolean>(false);

const submit = async () => {
  if (checked.value) {
    if (password.value === password1.value) {
      const res: any = await register({
        phone: route.query.phone as string,
        password: password.value,
        img: "",
        username: route.query.phone as string,
        name: "",
      });
      if (res.code === 200) {
        ElMessage.success(res.msg);
        router.push("/login");
      } else {
        ElMessage.error(res.msg);
      }
    } else {
      ElMessage.error("两次密码不一致");
    }
  } else {
    ElMessage.error("请勾选协议");
  }
};
const throttledPhoneLogin = throttle(submit, 3000);

</script>
    
    <style scoped lang="scss">
.loginview {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  .login {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    padding: 0% 20px;
    margin-top: 46px;
    box-sizing: border-box;
    .login-form {
      margin-top: 6ex;
      .van-field {
        margin-bottom: 20px;
      }
    }
    h1 {
      font-weight: 700;
      margin-bottom: 20px;
    }
    .agreement {
      margin-bottom: 20px;
      span {
        color: #1989fa;
      }
    }
    .other-login {
      margin-top: 60px;
    }
  }
}
</style>